<template>
  <div>
    <button @click="start">开始任务</button>
    <p>计数器实列：{{ count }}</p>
    <button @click="myFn">点击加一</button>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import { useRouter } from 'vue-router';

// setup 组件创建的过程
const router = useRouter()
let name = ref('jack')
let num = ref(10)
let obj = ref({
  msg: 'start'
})
let count = ref(0)

onMounted(() => {
  // 组件挂载的过程
  // 加载数据 dom...
  // 发请求 数据初始化操作 接收路由传递过来的参数
  console.log('onMounted')
})

onUnmounted(() => {
  // 组件卸载时的生命周期
  // 清除定时器 清除闭包函数等清除工作
  console.log('onUnmounted')
})

console.log('setup')

const start = () => {
  // push 如果传的是对象形式 就可以传递参数
  // query 传参
  // push里面还可以传入name name是路由的名字=路由index.js里的名字
  // query传参path和name都可以
  // params传参只能用name (该方式已移除，刷新页面会丢失数据)
  router.push({
    path: '/home',
    // name: 'home',
    query: {
      name: name.value,
      num: num.value,
      obj: JSON.stringify(obj.value)
    },
    // params: {
    //   name: name.value,
    //   num: num.value,
    //   obj: JSON.stringify(obj)
    // }
  })
}
const myFn = () => {
  console.log(count.value)
  count.value++;
}
</script>

<style scoped lang="scss"></style>